<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆注册</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/music.css"/>
    <link rel="stylesheet" href="css/home.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/public.js"></script>
    <style>
        .container-fluid {
            padding-right: 0px;
            padding-left: 0px;
            margin-right: 0px;
            margin-left: 0px;
        }

        .wrap {
            width: 100%;
            height: 90%;
            background-image: url(./img/a.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            /*overflow: hidden;*/
        }

        .containera {
            /*background-image: url(./img/a.jpg);*/
            /*background-repeat: no-repeat;*/
            /*background-size: 100% auto;*/
            overflow: hidden;
        }

        .register-box {
            /*width: 27%;*/
            height: 100%;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.95);
            float: right;
            margin: 7% 21% 3% 0;
        }

        .reg-login {
            width: 27%;
        }
        .dropdown-menu{
         	min-width: 100px;
         	margin: 2px 100px 0;
         }
    </style>
</head>
<body>
<div class="container-fluid" style="height:auto">
    <nav class="navbar navbar-default" role="navigation" style="margin-bottom:0px">
        <div class="nav_box">
            <ul class="nav navbar-nav" style="width: 100%; margin-bottom: 0px;margin-left: 10%">
                <li><a href="sy.html">首页</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        音乐风格
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="music.html" >流行音乐</a></li>
                        <li><a href="music2.html" >经典老歌</a></li>
                        <li><a href="music3.html">民谣</a></li>
                    </ul>
                </li>
                <li><a href="VIP.html">VIP</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li class="active"><a href="form.html" id="islogin"></a></li>
            </ul>
        </div>
    </nav>
</div>
<div class="wrap">
    <div class="containera">
        <div class="register-box" id="register-box">
            <div class="reg-slogan">
                <a id="zhu">注册</a>|<a id="deng">登录</a>
            </div>
            <div class="reg-form" id="js-form-mobile">

                <div class="cell">
                    <input type="text" name="mobile" id="register_phone" class="text" maxlength="11"
                           placeholder="填写手机号"/>
                </div>
                <!-- !短信验证码 -->
                <div class="cell vcode">
                    <input type="text" name="code" id="register_code" class="text" maxlength="6" placeholder="输入验证码"/>
                    <!--<a href="javascript:;" id="register_req_code" class="button" onclick="reqCode()"> 免费获取验证码</a>-->
                    <input type="button" id="register_req_code" class="button" onclick="reqCode()"
                           style="background-color:#167efb;padding:0;" value="获取验证码">
                </div>
                <div class="cell">
                    <input type="password" name="passwd" id="register_passwd_one" class="text" placeholder="输入密码"/>
                </div>
                <div class="cell">
                    <input type="password" name="passwd" id="register_passwd_two" class="text" placeholder="确认密码"/>
                </div>

                <div class="bottom"><a id="user_register" href="javascript:;" class="button btn-green"
                                       onclick="userRegister()"> 立即注册</a></div>
            </div>
            <!-- 登录-->
            <div class="reg-form" id="denglu" style="display: none;"><br>
                <br>
                <div class="cell">
                    <input type="text" name="mobile" id="login_phnoe" class="text" maxlength="11" placeholder="输入手机号"/>
                </div>
                <div class="cell">
                    <input type="password" name="passwd" id="login_passwd" class="text" placeholder="输入密码"/>
                </div>
                <div class="bottom"><a id="js-mobile_btn" href="javascript:;" class="button btn-green"
                                       onclick="userLogin()">登录</a></div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <p style="margin: 0 0 0;">北京华善盛世网络科技有限公司 京ICP备 17019399</p><p style="margin: 0 0 0;">京网文[2018] 2280-230 号</p></div>
</div>

<script>
    $("#zhu").click(function () {
        $("#js-form-mobile").show();
        $("#denglu").hide();
        $('#register-box').removeClass('reg-login');
    });
    $("#deng").click(function () {
        $("#js-form-mobile").hide();
        $("#denglu").show();
        $('#register-box').addClass('reg-login');
    });
</script>
<script type="text/javascript">
    $.ajax({
        url: 'islogin',
        type:"GET",
        dataType: "JSON",
        success: function(result) {
            if(result.code == '1') {
                //已登录
                $("#islogin").text(result.data);
                $("#islogin").attr("disabled",true).css("pointer-events","none");
                $("#register-box").hide();
            }else {
                $("#islogin").text("登录/注册");
            }
        },
        error: function(result, status) {
            $("#islogin").text("登录/注册");
        }
    });

    jQuery(function ($) {
        $(".cell").click(function () {
            $(this).children(".tag").hide();
//                  .end().siblings(".cell").children(".tag").show();
        });
    });
    // 是否点击获取验证码;
    var isClick=false;

    // 点击注册
    function userRegister() {
        // 手机号的值
        var telVal = check_tel($('#register_phone').val());
        // 验证码的值
        var register_code = $('#register_code').val();
        // 两次密码的值
        var pwd1 = $('#register_passwd_one').val();
        var pwd2 = $('#register_passwd_two').val();
        var correctPwd = check_repsw(pwd1, pwd2);
        var regData = {"tel": "", "regCode": "", "pwd": ""};
        if (telVal) {
            regData.tel = telVal;
        } else {
            alert('手机号错误');
            return false;
        }
        if(isClick == false){
            alert('请先获取验证码');
            return false;
        }
        if (register_code != "" && register_code.length == 6) {
            regData.regCode = register_code;
        } else {
            alert('验证码不正确');
            return false;
        }
        if(correctPwd.length <6){
            alert('密码要大于6位');
            return false;
        }else{
            console.log(correctPwd.length)
        }
        if (correctPwd) {
            regData.pwd = correctPwd;
        } else {
            alert('两次密码不一致');
            return false;
        }

        var passwd = $('#register_passwd_one').val();
        var phoneNumber = check_tel($('#register_phone').val());
        var veriCode = $('#register_code').val();
        $.ajax({
            async: false,
            type: "post",
            url: "register",
            data: {phoneNumber: phoneNumber,veriCode:veriCode,passwd:passwd},
            dataType: "json",
            success: function (data) {
                console.log(data);
                var code1 = data.code;
                if(code1==1){
                    alert("注册成功，请登录!");
                    window.location.reload();
                }else if (code1==201){
                    alert("当前用户已注册，请直接登录!");
                    window.location.reload();
                } else{
                    alert(data.message);
                }
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
    // 获取验证码
    function reqCode() {
        isClick = true;
        var phoneNumber = check_tel($('#register_phone').val());
        if (!phoneNumber) {
            alert('手机号错误');
            return false;
        }
        $.ajax({
            async: false,
            type: "post",
            url: "genCode",
            data: {phoneNumber: phoneNumber,type:"0"},
            dataType: "json",
            success: function (data) {
                var code1 = data.code;
                if(code1==20000){
                    alert("验证码已发送。请注意查收");
                    settime();
                }else{
                    alert("验证码发送失败");
                }

            },
            error: function (err) {
                console.log(err);
            }
        });
    }
    // 验证手机号
    function check_tel(obj) {
        var objvalue = obj;
        var regx = /^(?:13\d|15\d|18[123456789])-?\d{5}(\d{3}|\*{3})$/;
        if (regx.test(objvalue)) {
            return objvalue;
        } else {
            return false;
        }
    }
    //判断两次密码输入是否一致
    function check_repsw(obj1, obj2) {
        var objvalue1 = obj1;
        var objvalue2 = obj2;
        if (objvalue1 != "" && objvalue1 == objvalue2) {
            return objvalue1;
        } else {
            return false;
        }
    }

    // 倒计时
    var countdown = 4, timer = null;
    var _generate_code = $("#register_req_code");

    function settime() {
        if (countdown == 0) {
            _generate_code.attr("disabled", false);
            _generate_code.val("获取验证码");
            countdown = 4;
            return false;
        } else {
            _generate_code.attr("disabled", true);
            _generate_code.val("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
            settime();
        }, 1000);
    }
    // 登录
    function userLogin() {
        // 登录手机号
        var logtelval = check_tel($('#login_phnoe').val());
        // 登录密码
        var login_passwd = $('#login_passwd').val();
        var loginData = {"logtelval": "", "loginpwd": ""};
        if (logtelval) {
            loginData.logtelval = logtelval;
        } else {
            alert('手机号不正确');
            return false;
        }
        if (login_passwd != "" && login_passwd.length >= 6) {
            loginData.loginpwd = login_passwd;
        } else {
            alert('密码不正确');
            return false;
        }
//      var loginData = JSON.stringify(loginData);
        requestAjax.method('login', 'json', loginData, 'get', function (data) {
            console.log(data);
            if (data.code == '200') {
                alert('登录成功');
                window.location.href="sy.html";
            } else {
                alert('登录失败');
            }
        })
    }

    //页面跳转
    function goMusic(index) {
        window.location.href="music.html?index="+index;
    }
</script>

</body>
</html>
